//加载特效
pxmu.loading({
  msg: '加载中',
  time: 500
})

//退出登录
document.querySelector('#logout').addEventListener('click', function () {
  localStorage.removeItem('token')
  localStorage.removeItem('uname')
  location.href = 'login.html'
})

//将用户名渲染
function setUserName() {
  const unameBox = document.querySelector('.username')
  const username = localStorage.getItem('uname')
  if (username) {
    unameBox.innerHTML = username
  } else {
    unameBox.innerHTML = ''
  }
}
setUserName()

//获取学生信息
async function getStudentInfo() {
  const res = await axios({
    url: '/dashboard'
  })
  return res
}

//渲染学生信息
async function renderOverview() {
  const data = await getStudentInfo()
  console.log(data);
  const { overview } = data.data
  for (let key in overview) document.querySelector(`.${key}`).innerHTML = overview[key]
}
renderOverview()

//绘制2022年薪资EChart图
function yearEChart(months, salaries) {
  const myChart = echarts.init(document.getElementById('line'))
  option = {
    title: {
      text: '2022全学科薪资走势',
      top: '15px',
      left: '10px'
    },
    xAxis: {
      data: months
    },
    yAxis: {},
    series: [
      {
        data: salaries,
        type: 'line',
        smooth: true,
        symbolSize: 10,
        lineStyle: {
          width: 5,
          color: '#5381EF'
        },
        areaStyle: {
          // 使用线性渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#68A9F2' }, // 起始颜色为蓝色
            { offset: 1, color: '#fff' } // 结束颜色为深蓝色
          ], false),
          opacity: 0.7
        },
      }
    ]
  };
  myChart.setOption(option)
}

//获取2022年薪资数据
async function yearData() {
  const data = await getStudentInfo()
  const { year } = data.data
  //遍历获取months，salaries数组
  const months = [];
  const salaries = [];
  year.forEach(item => {
    months.push(item.month);
    salaries.push(item.salary);
  });
  //绘制图表
  yearEChart(months, salaries)
}
yearData()


//绘制图表
function salaryEChart(Salaries, gender, ele) {
  option = {
    title: {
      text: gender,
      left: 'center',
      bottom: '10px'
    },
    series: [
      {
        type: 'pie',
        data: Salaries,
        radius: ['35%', '50%'],
      }
    ]
  };

  ele.setOption(option)
}

async function genderData() {
  const data = await getStudentInfo()
  const { salaryData } = data.data

  const gSalaries = []
  const bSalaries = []
  const colorLIST = ['#F1A131', '#5097FF', '#39BCFA', '#33D39A']
  salaryData.forEach((item, index) => {
    gSalaries.push({ name: item.label, value: item.g_count, itemStyle: { color: colorLIST[index] } }) // 女生
    bSalaries.push({ name: item.label, value: item.b_count, itemStyle: { color: colorLIST[index] } })
  })

  //绘制图表
  const gChart = echarts.init(document.getElementById('female'))
  const bChart = echarts.init(document.getElementById('male'))
  salaryEChart(gSalaries, '女生', gChart)
  salaryEChart(bSalaries, '男生', bChart)
}

genderData()
